//
// Breadcrumbs
// --------------------------------------------------

.breadcrumb {
  > li {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;

    &.open {
      overflow: inherit;
    }

    + li:before {
      content: "@{breadcrumb-separator}"; /* No additional space needed */
    }

    // Styles for the tree navigation.
    &.dropdown {
      /* We make sure the links get their own specific color. */
      & > a {
        color: @breadcrumb-link-color;
        &:hover, &:focus {
          color: @breadcrumb-active-color;
        }
      }
      
      > .dropdown-toggle {
        color: @breadcrumb-color;
        cursor: pointer;
        /* Match the separator padding */
        margin: 2px;
        margin-left: 5px;
        /* Remove default styles for buttons */
        background: transparent;
        border-color: transparent;
        padding: 0;
        line-height: .5rem;

        &:hover, &:focus {
          color: @breadcrumb-active-color;
          /* We want to revert the default from bootstrap where the outline is removed... */
          outline: revert;
        }
      }

      > .dropdown-menu {
        /* Leave more padding around the tree. */
        padding: 5px 10px 5px 0;
        /* The breadcrumb uses a smaller font size. */
        .text-smaller;

        a {
          /* Reset the link color inside the tree. */
          color: @dropdown-link-color;
        }
      }
    }
  }

  > .active {
    &:last-of-type {
      a {
        color: @breadcrumb-active-color;
      }
    }
  }
}

/* TODO: Update the JS code to use a more specific CSS selector when updating the content of the actual breadcrumb,
  in order to eventually remove this rule and add the 'breadcrumb' class to the 'location-actions' node. */
dd > .breadcrumb-container > .location-actions {
  /* Retrieve style from the breadcrumb block. Needed for keyboard accessibility reorganization of the
  location-picker component. */
  .breadcrumb;
}
